import React, { useCallback, useEffect, useState } from "react";
import Style from "../IntelligentMatchTable/index.module.less";
import { useSkuList } from "./useSkuList";
import { useSupplierList } from "./useSupplierList";
import { SimpleTable } from "@/views/components/SearchTable/index";
import { cloneDeep } from "lodash";
import { message } from "antd";

import { goodsSkuMatch, getZjfGoodsSkuVOList, getMatchSkuListBySpuId, foreignSeniorSearchByUrl } from "../service";

const TablePage = props => {
	const { selectedRows, isSkuType, isChangeMatch, onDrawerClose, isOrderGoods } = props;
	const { orderIds, image, colour, specs, spuId, skuId, goodsSkuMatches, matchedId, id } = selectedRows[0] || {};
	if (!image || !colour || !specs) {
		message.warning("该商品不支持智能匹配");
		onDrawerClose(null, false);

		// 数组 selectedRow。goodsSkuMatches 的字段如下
		// matchType,
		// skuId,
		// supplierId,
		// supplierName,
		// supplierSkuId,
		// supplierSkuImage,
		// supplierSkuName,
		// supplierSkuPrice,
		// supplierSkuSpecs,
		// supplierSpuCode,
		return <></>;
	}

	const { tableKey, searchSimpleTableProps } = useSkuList({ selectedRows, onDrawerClose });
	const {
		tableKey: tableKey2,
		searchSimpleTableProps: searchSimpleTableProps2,
		dataSource
	} = useSupplierList({
		selectedRows,
		isOrderGoods,
		orderIds,
		image,
		spuId,
		skuId: isOrderGoods ? id : skuId,//订单那边调用了商品详情接口
		goodsSkuMatches,
		isChangeMatch,
		matchedId,
		onDrawerClose
	});
	return (
		<div className={"views-container " + Style.views_container_flex}>
			<p className={Style.table_title}>系统商品</p>

			<SimpleTable
				key={tableKey}
				{...searchSimpleTableProps}
				className={"mb16 " + Style.views_container_flex_table}
				style={{ overflow: "visible" }}
			/>
			<p className={Style.table_title}>请选择供应商商品</p>
			{dataSource.length ? (
				<SimpleTable key={tableKey2} {...searchSimpleTableProps2} className={"mb16 " + Style.views_container_flex_table} />
			) : (
				<div className={Style.table_empty}>抱歉，未搜索出相似图片的商品</div>
			)}
		</div>
	);
};

export default React.memo(TablePage, () => {
	return true;
});
